<!-- 公告栏组件 -->
<template>
  <div class="notice-bar">
    <div class="notice-bar__wrap">

      <div class="left">
        <slot name="left">
          <div>
            <svg-icon
              icon-class="notice"
              class="svg-icon"
            />
          </div>
        </slot>
      </div>

      <div class="content">
        <div
          ref="contentRef"
          class="content__text"
          :style="[ animationStyle ]"
        >
          <div
            v-for="(item, index) in list"
            :key="index"
            style="margin-left: 20px;"
            @mouseenter="stopRolling"
            @mouseleave="startRolling"
          >
            {{ item }}
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'NoticeBar',
  props: {
    list: {
      type: Array,
      default: () => ([])
    },
    // 每秒滚动多少距离 px
    speed: {
      type: Number,
      default: 100
    },
    // 滚动多长时间后停止展示 （分钟）
    duration: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      animationDuration: 0,
      animationPlayState: 'paused',
      timer: null
    }
  },
  computed: {
    animationStyle() {
      const style = {}
      style.animationDuration = this.animationDuration
      style.animationPlayState = this.animationPlayState
      return style
    }
  },
  watch: {
    list(n) {
      this.getAnimationDuration()
      if (n.length > 0) {
        this.clearTimeout()
        this.clearNoticeList()
      }
    }
  },
  created() {},
  mounted() {
    this.getAnimationDuration()
  },
  destroyed() {
    this.clearTimeout()
  },
  methods: {
    getAnimationDuration() {
      const textWidth = this.$refs.contentRef.clientWidth
      // console.log('textWidth --------->', textWidth)
      this.animationDuration = `${textWidth / this.speed}s`
      if (this.list.length > 0) {
        this.animationPlayState = 'paused'
        setTimeout(() => {
          this.animationPlayState = 'running'
        }, 10)
      }
    },

    stopRolling() {
      this.animationPlayState = 'paused'
    },

    startRolling() {
      setTimeout(() => {
        this.animationPlayState = 'running'
      }, 10)
    },

    clearNoticeList() {
      this.timer = setTimeout(() => {
        this.$emit('clearNoticeList')
      }, this.duration * 60 * 1000)
    },

    clearTimeout() {
      clearTimeout(this.timer)
      this.timer = null
    }
  }
}
</script>
<style scoped lang='scss'>
.notice-bar {
  height: 100%;
  padding: 10px;
  width: 100%;
  border: 1px solid #2CD5FF;
  box-shadow: 0 0 25px 0 #2CD5FF inset;
  background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
  linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
  linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
  linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
  background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;
  position: relative;

  &__wrap {
    height: 100%;
    display: flex;
    align-items: center;
    .left {
      margin-right: 10px;
      padding: 10px;

      .svg-icon {
        //color: #fff;
        fill: #fff;
        font-size: 20vh;
      }
    }
    .content {
      flex: 1;
      overflow: hidden;
      display: flex;
      &__text {
        font-size: 30vh;
        display: flex;
        padding-left: 100%;
        word-break: keep-all;
        white-space: nowrap;
        animation: u-loop-animation 60s linear infinite both;
      }
    }
  }
}

@keyframes u-loop-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>

